<template>
	<view class="columnbox wdh-100 content">
		<view class="columnbox wdh-100 als top-box">
			<view class="p-num">¥ {{walletinfo.cash}}</view>
			<view class="p-name">零钱</view>
			<view class="rowbox wdh-100 btn-box">
				<!-- <view class="tx-btn">提现</view> -->
				<view @click="toRecharge" class="small-btn" style="width: 150rpx;border-radius: 10rpx;">充值</view>
			</view>
		</view>
		<view class="rowbox wdh-100 tab-box spb">
			<view @click="changeTab(index)" v-for="(item,index) in tabList" :key='index' class="columnbox one-tab"
				:class="{'sel-tab':index==curtab}">
				{{item.title}}
				<view class="tab-line" v-if="index==curtab"></view>
			</view>
		</view>
		<view class="rowbox wdh-100 spb t-box">
			<view>支出：{{monthinfo.ex}} <text style="margin-left: 20rpx;">
					收入：{{monthinfo.in}}</text> </view>
			<picker mode="date" fields="month" @change="pickerChange">
				<view class="rowbox">
					{{curmonth}} <u-icon name="arrow-right" size="28rpx"></u-icon>
				</view>
			</picker>
		</view>
		<view class="rowbox spb one-info" v-for="(item,index) in recordlist" :key='index'>
			<view class="columnbox als">
				<view class="d-title">{{getType(item.operationType)}}</view>
				<view class="d-date">{{item.createTime}}</view>
			</view>
			<view class="d-price rowbox">
				<text v-if="item.inExType==0">+</text>
				<text v-else>-</text>
				{{item.optCash}}
				<u-icon name="arrow-right" size="28rpx"></u-icon>
			</view>
		</view>
		<!-- <view class="rowbox spb one-info">
			<view class="columnbox als">
				<view class="d-title">充值</view>
				<view class="d-date">2024-5-9 17:52:01</view>
			</view>
			<view class="d-price rowbox" style="color: #FF5252;">+ 5.00
				<u-icon name="arrow-right" size="28rpx"></u-icon>
			</view>
		</view> -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tabList: [{
						title: '全部',
						value: 0
					},
					{
						title: '收入',
						value: 1
					},
					{
						title: '支出',
						value: 2
					}
				],
				curtab: 0,
				walletinfo: {
					couponsNum: 0,
					integral: 0,
					cash: '0.00'
				},
				curmonth: '',
				monthinfo: {
					ex: "0.00",
					in: "0.00"
				},
				inExType: 0,
				pageNum: 1,
				recordlist: [],
				total: 0
			};
		},
		onLoad() {
			var date = new Date
			this.curmonth = date.getFullYear() + '-' + (date.getMonth() + 1 < 10 ? ('0' + (date.getMonth() + 1)) : (date
				.getMonth() + 1))
			this.getWallet()
			this.getMonthData()
			this.getList()
		},
		onReachBottom() {
			if (this.recordlist.length < this.total) {
				this.pageNum++
				this.getList()
			}
		},
		methods: {
			toRecharge() {
				uni.navigateTo({
					url: '/pages/coupon/buyCoupon'
				})
			},
			getType(v) {
				switch (v) {
					case 0:
						return '套餐充值'
						break;
					case 1:
						return '洗车券支付'
						break;
					case 2:
						return '零钱支付'
						break;
					case 3:
						return '订单充值'
						break;
					case 4:
						return '洗车退款'
						break;
				}
			},
			changeTab(v) {
				this.curtab = v
				this.pageNum = 1
				this.recordlist = []
				this.getList()
			},
			pickerChange(e) {
				this.curmonth = e.detail.value
				this.getMonthData()
				this.pageNum = 1
				this.recordlist = []
				this.getList()
			},
			getWallet() {
				this.$req.get('/xcx/userWallet').then(res => {
					if (res.data.data) {
						this.walletinfo = res.data.data
					}
				})
			},
			getMonthData() {
				this.$req.get('/xcx/userWalletLog/dib/month', {
					currentDate: this.curmonth,
				}).then(res => {
					this.monthinfo = res.data.data
				})
			},
			getList() {
				this.$req.get('/xcx/userWalletLog/dib/month/list', {
					currentDate: this.curmonth,
					inExType: this.curtab - 1,
					pageSize: 20,
					pageNum: this.pageNum
				}).then(res => {
					this.recordlist = this.recordlist.concat(res.data.rows)
					this.total = res.data.total
				})

			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		background: #f7f8fa;
		min-height: 100vh;
		justify-content: flex-start;
		font-family: PingFang SC;
		width: 100%;
		overflow: hidden;
	}

	.top-box {
		background: #fff;
		padding: 40rpx 32rpx;

		.p-num {
			font-size: 36rpx;
		}

		.p-name {
			font-size: 28rpx;
			margin-top: 20rpx;
			color: #6C6C6C;
		}

		.btn-box {
			justify-content: flex-end;
		}

		.tx-btn {
			margin-right: 20rpx;
			color: #17698F;
			font-size: 28rpx;
			width: 100rpx;
		}
	}

	.tab-box {
		background: #fff;
		margin-top: 4rpx;
		padding: 0 40rpx;

		.one-tab {
			font-size: 28rpx;
			padding: 20rpx 0;
			position: relative;
		}

		.tab-line {
			background: #17698F;
			width: 70rpx;
			height: 5rpx;
			position: absolute;
			bottom: 10rpx;
		}

		.sel-tab {
			color: #17698F;
		}
	}

	.t-box {
		background: #fff;
		padding: 20rpx 40rpx;
		font-size: 24rpx;
	}

	.one-info {
		padding: 32rpx 40rpx;
		margin-bottom: 2rpx;
		background: #fff;
		width: 100%;
	}

	.d-title {
		font-size: 32rpx;
	}

	.d-date {
		font-size: 24rpx;
		color: #999999;
		margin-top: 10rpx;
	}

	.d-price {
		font-size: 32rpx;
	}
</style>